<template>
    <div>
        <van-nav-bar
            left-text="读者荐书"
            left-arrow
            @click-left="onClickLeft"
            style="background-color: #4fc08d;"

        />
        <div class="main">
            <h5>为了让书吧的图书更丰富，想听听您的意见</h5>
            <div class="yijian">
                <van-form v-model="formmodel">
                    <van-cell-group inset>
                    <van-field
                        v-model="formmodel.bookname"
                        rows="1"
                        autosize
                        label="书名"
                        type="textarea"
                        placeholder="请输入书名"
                        required
                        label-left
                    />
                    <van-field
                        v-model="formmodel.author"
                        rows="1"
                        autosize
                        label="作者"
                        type="textarea"
                        placeholder="请输入作者"
                    />
                    <van-field
                        v-model="formmodel.reason"
                        rows="1"
                        autosize
                        label="推荐理由"
                        type="textarea"
                        placeholder="请输入推荐理由"
                    />
                    </van-cell-group>
                </van-form>
                <van-button  size="small" @click="onClickSubmit(formmodel)" round type="success">提交</van-button>
            </div>

  
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref ,reactive} from "vue";
import { showToast,Toast,Notify,showNotify,Dialog,showDialog,showConfirmDialog   } from "vant";

import { useRouter } from "vue-router";

let $router = useRouter()

//书名 作者 推荐理由
const bookname = ref('')
const author = ref('')
const reason = ref('')
const formmodel = reactive({
    bookname: '',
    author: '' ,
    reason:''
});



// 提交
function onClickSubmit(formmodel:any) {
    console.log(formmodel);
    
    if (formmodel.bookname == "" ||formmodel.author == '' || formmodel.reason =='') {
        console.log('请输入完整信息');
        
        showConfirmDialog({
            message:"请输入完整信息",
        }
        )
    }else{

        showConfirmDialog({
             message:"提交成功",
        }
        )
        $router.push('/Mine')

    }

}

// 返回
function onClickLeft() {
  $router.back();
}

</script>

<style scoped>
h5{
    text-align: center;
    line-height: 30px;
}
.yijian{
    width: 100%;
    height: 500px;
}
.van-button{
    width:300px;
    margin:5px 37px;
    font-size:12px;
}
</style>